<div class="content-wrapper">
    <div class="container">
        <div class="row pad-botm">
            <div class="col-md-12">
                <h4 class="header-line">My Account</h4>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-info panel-zs">
                    <div class="panel-heading">Account Information <a href="#Personal" data-toggle="modal" class="pull-right">EDIT</a></div>
                    <div class="panel-body">
                        <div class="col-md-6 col-sm-6">
                            <p class='p'><strong>NAME</strong><br/><span>{$data.detail.surnames} {$data.detail.first_name} {$data.detail.middle_name}</span></p>
                            <p class='p'><strong>DATE OF BIRTH</strong><br/><span>{$data.detail.date_of_birth|default='no'}</span></p>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <p class='p'><strong>COMPANY</strong><br/><span>{$data.detail.organization|default='no'}</span></p>
                            <p class='p'><strong>JOB TITLE</strong><br/><span>{$data.detail.job_title|default='no'}</span></p>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <p class='p'><strong>MEMBER TYPE</strong><br/><span>{$data.detail.level_name}</span></p>
                            <p><strong>MEMBERSHIP STATUS</strong><br/>{$data['detail']['level_id'] == 1 ? '<button type="button" class="btn btn-primary">active</button>' : $data['detail']['level_status'] ? '<button type="button" class="btn btn-primary">active</button>' : '<button type="button" class="btn btn-info">Inactive</button> 　<a href="/index/index/pay" type="button" class="btn btn-success">To pay</a>'}</p>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <p class='p'><strong>CERTIFICATE CODE</strong><br/><span>{$data.detail.certificate_code|default='no'}</span></p>
                        </div>
                    </div>
                    <div class="panel-footer"><a href="#Password" data-toggle="modal" >Modify password</a></div>
                </div>
            </div>
        </div>
        <!-- /. ROW  -->

        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="panel panel-default panel-zs">
                    <div class="panel-heading">Address Information <a href="#Address" data-toggle="modal" class="pull-right">EDIT</a></div>
                    <div class="panel-body">
                        <p style='margin-bottom:0px;'><strong>MAILING ADDRESS</strong></p>
                        <p class='p'><span>{$data.addr.addr1}{if condition="$data.addr.addr2"}<br>{$data.addr.addr2}{/if}{if condition="$data.addr.addr3"}<br>{$data.addr.addr3}{/if}</span></p>
                        <p class='p'><span>{$data.addr.city}&nbsp;{$data.addr.postalcode}&nbsp;{$data.addr.country}&nbsp;{$data.addr.province}</span></p>
                    </div>
<!--                    <div class="panel-footer"><a href="#Address" data-toggle="modal" >Modify information</a></div>-->
                </div>
            </div>
            <div class="col-md-6 col-sm-6">
                <div class="panel panel-primary panel-zs">
                    <div class="panel-heading">Contact Information <a href="#Contact" data-toggle="modal" class="pull-right" style="color:white">EDIT</a></div>
                    <div class="panel-body">
                        <p class='p'><strong>PHONE</strong><br/><span>{$data.detail.phone}</span></p>
                        <p class='p'><strong>FAX</strong><br/><span>{$data.detail.fax}</span></p>
                        <p class='p'><strong>EMAIL</strong><br/><span>{$data.detail.email}</span></p>
                        <p class='p'><strong>CONTACT BY</strong><br/><span>{$data.detail.contact_by}</span></p>
                    </div>
                    <!--<div class="panel-footer"><a href="#Contact" data-toggle="modal" >Modify information</a></div>-->
                </div>
            </div>
        </div>
        <!-- /. ROW  -->
    </div>
</div>
<!-- CONTENT-WRAPPER SECTION END-->

<!-- Pop Personal -->
<div class="modal fade" id="Personal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h4>Modify Personal Information</h4>
            </div>
            <div class="modal-body">
                <form role="form" id="info1_form">
                    <input type="hidden" name='type' value='edit1'>
                    <div class="form-group">
                        <label>Prefix</label>
                        <select class="form-control" name="prefix">
                            <option value="Capt." {if condition="$data.detail.prefix eq 'Capt.'"}selected{/if}>Capt.</option>
                            <option value="Dr." {if condition="$data.detail.prefix eq 'Dr.'"}selected{/if}>Dr.</option>
                            <option value="Miss" {if condition="$data.detail.prefix eq 'Miss'"}selected{/if}>Miss</option>
                            <option value="Mr." {if condition="$data.detail.prefix eq 'Mr.'"}selected{/if}>Mr.</option>
                            <option value="Mrs." {if condition="$data.detail.prefix eq 'Mrs.'"}selected{/if}>Mrs.</option>
                            <option value="Ms." {if condition="$data.detail.prefix eq 'Ms.'"}selected{/if}>Ms.</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>First Name</label>
                        <input class="form-control" name="first_name" value="{$data.detail.first_name}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Middle name</label>
                        <input class="form-control" name="middle_name" value="{$data.detail.middle_name}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Last Name (Surname)</label>
                        <input class="form-control" name="surnames" value="{$data.detail.surnames}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Date of Birth</label>
                        <input class="form-control" name="date_of_birth" value="{$data.detail.date_of_birth}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Organization</label>
                        <input class="form-control" name="organization" value="{$data.detail.organization}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Job Title</label>
                        <input class="form-control" name="job_title" value="{$data.detail.job_title}" type="text" />
                    </div>

                    <button type="button" class="btn btn-info" id="info1">Send Message </button>

                </form>
            </div>
            <div class="modal-footer">
                <button class="view-bio" data-dismiss="modal" type="button">Close</button></div>
        </div>
    </div>
</div>
<!-- End Personal -->
<!-- Pop Address -->
<div class="modal fade" id="Address" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h4>Modify Address Information</h4>
            </div>
            <div class="modal-body">
                <form role="form" id="addr_form">
                    <div class="form-group">
                        <label>Mailing Address line 1</label>
                        <input class="form-control" name="addr1" value="{$data.addr.addr1}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Mailing Address line 2</label>
                        <input class="form-control" name="addr2" value="{$data.addr.addr2}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Mailing Address line 3</label>
                        <input class="form-control" name="addr3" value="{$data.addr.addr3}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>City</label>
                        <input class="form-control" name="city" value="{$data.addr.city}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Postalcode</label>
                        <input class="form-control" name="postalcode" value="{$data.addr.postalcode}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Country</label>
                        <input class="form-control" name="country" value="{$data.addr.country}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Province</label>
                        <input class="form-control" name="province" value="{$data.addr.province}" type="text" />
                    </div>

                    <button type="button" class="btn btn-info" id="addr">Send Message </button>

                </form>
            </div>
            <div class="modal-footer">
                <button class="view-bio" data-dismiss="modal" type="button">Close</button></div>
        </div>
    </div>
</div>
<!-- End Address -->
<!-- Pop Contact -->
<div class="modal fade" id="Contact" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h4>Modify Contact Information</h4>
            </div>
            <div class="modal-body">
                <form role="form" id='info2_form'>
                    <input type="hidden" name='type' value='edit2'>
                    <div class="form-group">
                        <label>Phone</label>
                        <input class="form-control" name='phone' value="{$data.detail.phone}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Fax</label>
                        <input class="form-control" name='fax' value="{$data.detail.fax}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input class="form-control" name='email' value="{$data.detail.email}" type="text" />
                    </div>
                    <div class="form-group">
                        <label>Contact by</label>
                        <select class="form-control" name="contact_by">
                            <option value='email' {if condition="$data.detail.contact_by eq 'email'"}selected{/if}>E-mail</option>
                            <option value='fax' {if condition="$data.detail.contact_by eq 'fax'"}selected{/if}>Fax</option>
                            <option value='mail' {if condition="$data.detail.contact_by eq 'mail'"}selected{/if}>Mail</option>
                            <option value='phone' {if condition="$data.detail.contact_by eq 'phone'"}selected{/if}>Phone</option>
                        </select>
                    </div>

                    <button type="button" class="btn btn-info" id='info2'>Send Message </button>

                </form>
            </div>
            <div class="modal-footer">
                <button class="view-bio" data-dismiss="modal" type="button">Close</button></div>
        </div>
    </div>
</div>


<!-- Pop Contact -->
<div class="modal fade" id="Password" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h4>Modify password</h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                <div class="alert alert-info alert-zs">
                    <p>Please enter your new password. To help protect the security of your personal information, your password must:</p>
                    <ul>
                        <li>Be 9-25 characters</li>
                        <li>Contain at least one uppercase and one lowercase letter</li>
                        <li>Contain at least one number</li>
                    </ul>
                    <p>Please note that special characters (such as # and &amp;) are not valid.</p>
                </div>
            </div>
                <form role="form" id='password_form'>
                    <div class="form-group">
                        <label>Original password:</label>
                        <input class="form-control" name='password' type="password" />
                    </div>
                    <div class="form-group">
                        <label>New Password:</label>
                        <input class="form-control" name='new_password' type="password" />
                    </div>
                    <div class="form-group">
                        <label>Confirm New Password:</label>
                        <input class="form-control" name='new_password2' type="password" />
                    </div>

                    <button type="button" class="btn btn-info" id='password'>Send Message </button>

                </form>
            </div>
            <div class="modal-footer">
                <button class="view-bio" data-dismiss="modal" type="button">Close</button></div>
        </div>
    </div>
</div>


